<app-manager-top></app-manager-top>
<app-manager-side-nav></app-manager-side-nav>
<div>
    <app-dialog-box *ngIf="isAddItemDialogVisible"
                    (confirm)="onConfirm($event)"
                    (cancel)="onCancel()">
    </app-dialog-box>
</div>
<div class="sidebar" id="sidebar" [@openCloseForItem]="productShow&&itemShow ? 'open' : 'closed'" [@openCloseForProduct]="productShow ? 'open' : 'closed'">
    <div class="product-info">
        <div id="product-id" class="product-id"></div>
        <div [class]="{'loader':productLoad}"></div>
        <div class="info-field"
             [class]="{'info-field':true,'blur-effect':productLoad}">
            <ng-template [ngIf]="productVO">
                <table>
                    <thead>
                    <tr>
                        <th></th>
                        <th>Item Id</th>
                        <th>List Price</th>
                        <th>Unit Cost</th>
                        <th>Status</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <ng-template ngFor let-item [ngForOf]="productVO?.itemList">
                        <tr [class.selected]="isCheckedItem(item?.itemId)">
                            <td><input type="checkbox"
                                       [checked]="">
                            </td>
                            <td (click)="getItem(item?.itemId)"><a>{{item?.itemId}}</a></td>
                            <td>{{item?.listPrice}}</td>
                            <td>{{item?.unitCost}}</td>
                            <td>{{item?.status}}</td>
                            <td>{{item?.attribute1}}</td>
                        </tr>
                    </ng-template>
                    </tbody>
                </table>
            </ng-template>
        </div>
    </div>
    <div class="item-info">
        <div id="item-id"></div>
        <div [class]="{'loader':itemLoad}"></div>
        <div class="info-field"
             [class]="{'info-field':true,'blur-effect':itemLoad}">
            <ng-template [ngIf]="itemVO">
                <table>
                    <thead>
                    <tr>
                        <th>Item Id</th>
                        <th>Quantity</th>
                        <th>Picture</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{itemVO?.itemId}}</td>
                            <td>{{itemVO?.quantity}}</td>
                            <td><img src="assets/{{itemVO?.descriptionImage}}"></td>
                        </tr>
                    </tbody>
                </table>
            </ng-template>
        </div>
    </div>
</div>
<div id="page-wrapper" [@openClose]="isSideNavClosed ? 'closed' : 'open'" (click)="clickPageWrapper()" [class.dialog-open]="isAddItemDialogVisible">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <h1 class="page-header">
                    商品管理 <small></small>
                </h1>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="select-field">
                                <div class="option" (click)="getCategory('ALL')"
                                     [class.option-selected]="selectedOption==='ALL'">
                                    <div><img src="assets/images/ALL.png" alt="ALL"></div>
                                </div>
                                <div class="option" (click)="getCategory('FISH')"
                                     [class.option-selected]="selectedOption==='FISH'">
                                    <div><img src="assets/images/fish.png" alt="fish"></div>
                                </div>
                                <div class="option" (click)="getCategory('DOGS')"
                                     [class.option-selected]="selectedOption==='DOGS'">
                                    <div><img src="assets/images/dog.png" alt="dog"></div>
                                </div>
                                <div class="option" (click)="getCategory('REPTILES')"
                                     [class.option-selected]="selectedOption==='REPTILES'">
                                    <div><img src="assets/images/reptile.png" alt="reptile"></div>
                                </div>
                                <div class="option" (click)="getCategory('CATS')"
                                     [class.option-selected]="selectedOption==='CATS'">
                                    <div><img src="assets/images/cat.png" alt="cat"></div>
                                </div>
                                <div class="option" (click)="getCategory('BIRDS')"
                                     [class.option-selected]="selectedOption==='BIRDS'">
                                    <div><img src="assets/images/bird.png" alt="bird"></div>
                                </div>
                                <!-- 编辑，删除，保存，取消  -->
                                <div class="operator">
                                    <button id="save-button" [style.display]="editing ? '':'none'"
                                            [class.operator-enabled]="editing" (click)="saveRow()">
                                        保 存
                                    </button>
                                    <button id="cancel-button" [style.display]="editing ? '':'none'"
                                            [class.operator-enabled]="editing" (click)="cancelRow()">
                                        取 消
                                    </button>
                                    <button id="edit-button" [class.operator-enabled]="isEditable()&&!editing"
                                            (click)="editRow()">
                                        编 辑
                                    </button>
                                    <button id="delete-button" [class.operator-enabled]="isDeletable()&&!editing"
                                            (click)="dropRow()">
                                        删 除
                                    </button>
                                    <button id="add-button" [class.operator-enabled]="!isEditable()&&!isDeletable()&&!editing"
                                            (click)="addItem()">
                                        添 加
                                    </button>
                                </div>
                            </div>
                            <div id="category-id" [style.content]="categoryImg"></div>
                            <div [class]="{'loader':categoryLoad}"></div>
                            <div class="info-field"
                                 [class]="{'info-field':true,'blur-effect':categoryLoad,'blur-effect-dark':productShow}">
                                <ng-template [ngIf]="categoryVO">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" (click)="toggleSelectALL()"></th>
                                            <th>Product Id</th>
                                            <th>Category Id</th>
                                            <th>Name</th>
                                            <th>Description</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <ng-template ngFor let-product [ngForOf]="categoryVO?.productList">
                                            <tr [class.selected]="isChecked(product?.productId)">
                                                <td><input type="checkbox" (click)="toggleSelect(product?.productId)"
                                                           [checked]="isChecked(product?.productId)">
                                                </td>
                                                <td (click)="getProduct($event,product?.productId)"><a>{{product?.productId}}</a></td>
                                                <td>{{product?.categoryId}}</td>
                                                <td>{{product?.name}}</td>
                                                <td>{{getDescription(product?.description)}}</td>
                                            </tr>
                                            <tr [id]="editingProduct == product?.productId ? 'editing':''"
                                                [style]="{'display':editingProduct == product?.productId ? '':'none'}">
                                                <td></td>
                                                <td><input type="text" value="{{product?.productId}}"/></td>
                                                <td><input type="text" value="{{product?.categoryId}}"></td>
                                                <td><input type="text" value="{{product?.name}}"></td>
                                                <td><input type="text" value="{{getDescription(product?.description)}}">
                                                </td>
                                            </tr>
                                        </ng-template>
                                        </tbody>
                                    </table>
                                </ng-template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
    </footer>
</div>

